﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Upload</title>
    <style type="text/css">
        body
        {
            margin: 0;
            font: normal normal 12px/150% arial;
        }
        #dropArea
        {
            padding: 20px 0px;
            margin: 20px;
            border: 2px dashed #ddd;
        }
        p#dragLabel
        {
            font-size: 1.5em;
            font-weight: bold;
            color: #BBB;
            text-align: center;
            font-style: italic;
        }
        #loading
        {
            padding: 0 0 0 20px;
        }
    </style>
    <script type="text/javascript" src="../../Scripts/Mr.js"></script>
    <script type="text/javascript">
        Mr(function () {
            if ((Mr.browser.ff || Mr.browser.chrome) && window.FileReader) {
                var dropArea = document.getElementById('dropArea');
                var loading = document.getElementById('loading');

                dropArea.addEventListener('dragover', function (evt) {
                    this.style.borderColor = "blue";
                    this.style.backgroundColor = '#eee';
                    evt.preventDefault();
                    return false;
                }, false);

                dropArea.addEventListener('dragleave', function (evt) {
                    this.style.borderColor = "#ddd";
                    this.style.backgroundColor = '#fff';
                    return false;
                }, false);

                dropArea.addEventListener('drop', function (evt) {
                    evt.preventDefault();

                    this.style.borderColor = "#ddd";
                    this.style.backgroundColor = '#fff';

                    var files = evt.dataTransfer.files;
                    var fileLength = files.length;

                    var iterator = Mr.range(Mr.strFormat('[0, {0}]', fileLength));
                    var useBinary = Mr.http.supportBinary;
                    Mr.asynIterator(iterator, function (i) {
                        var f = files[i];
                        if (!/^image.*/.test(f.type)) {
                            return Mr.CONTINUE;
                        }

                        var reader = new FileReader();
                        if ('onloadstart' in reader) {
                            reader.onloadstart = function () {
                                loading.innerHTML = 'READING : <b>' + f.name + '</b>';
                            };
                        }

                        reader.onload = (function (f, asyn) {
                            return function (e) {
                                if (e.target.readyState == FileReader.DONE) {
                                    var result = e.target.result;
                                    Mr.mhttp({
                                        url: '/Upload/Upload',
                                        useBinary: useBinary,
                                        data: { file: { fileName: f.name, contentType: f.type, value: result, useBinary: useBinary} },
                                        method: 'GET', // if use mhttp, the method will not be executed. And it must be POST.
                                        onopen: function () {
                                            loading.innerHTML = 'UPLOADING : <b>' + f.name + '</b>';
                                        },
                                        onloading: function () {
                                            // if use mhttp, the loading method will not be executed.
                                        },
                                        oncomplete: function () {
                                            reader = null;
                                            loading.innerHTML = '<b>DONE.</b>';
                                            asyn.next();
                                        },
                                        onerror: function () {

                                        },
                                        // if browser doesn't support onprogress, will ignore it.
                                        onuploadprogress: function (percent) {
                                            console.log(percent);
                                        },
                                        ontimeout: function () {
                                            console.log('timeout');
                                        }
                                    }).request();
                                }
                            };
                        })(f, this);

                        if (useBinary) {
                            reader.readAsBinaryString(f);
                        } else {
                            reader.readAsDataURL(f);
                        }
                    });

                    return false;
                }, false);
            } else {
                var p = document.getElementById('dragLabel');
                p.innerHTML = 'SORRY, YOUR BROWSER DON\'T SUPPORT [Drag and Drop] OR [File API].';
                p.style.color = 'red';
            }
        });
    </script>
</head>
<body>
    <div id="dropArea">
        <p id="dragLabel">
            Drag images from your desktop to drop here</p>
    </div>
    <p id="loading">
    </p>
</body>
</html>
